<template>
<div>
  <el-card>
    <el-form :inline="true" :model="query" label-width="100px" size="small">
       <!-- 晋升类型 -->
      <el-form-item  class="query-form-item">
        <span>晋升类型：</span>
        <el-select  v-model="query.promotioncategoryid" placeholder="请选择晋升类型" @change="onSubmit"  clearable>
          <!-- <el-option label="全部" value></el-option> -->
          <el-option v-for="item in dataList" :key="item.promotioncategoryid"  clearable 
          :label="item.categoryname" :value="item.promotioncategoryid"></el-option>
        </el-select>   
      </el-form-item>
    <!-- 审核状态 -->
      <el-form-item class="query-form-item" >
        <span>审核状态：</span>
        <el-select v-model="query.auditstatus"  placeholder="请选择状态" @change="onSubmit" clearable>
          
          <el-option label="审核中" value="0"></el-option>
          <el-option label="通过" value="1"></el-option>
          <!-- <el-option label="驳回" value="2"></el-option> -->
        </el-select>
      </el-form-item>

      <!-- 生效状态 -->
      <el-form-item class="query-form-item" >
        <span>生效状态：</span>
        <el-select v-model="query.effectivestatus" placeholder="请选择状态" @change="onSubmit" clearable>
          
          <el-option label="未生效" value="0"></el-option>  
          <el-option label="已生效" value="1"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <el-form :inline="true" :model="query" label-width="100px" size="small">
      <!-- 商户账号查询 -->
      <el-form-item>
      <span>商户账号：</span>
      <el-form-item class="query-form-item">
            <el-input v-model="query.account" placeholder="商户账号" prefix-icon="el-icon-search"  @keyup.enter.native="onSubmit" clearable></el-input>
      </el-form-item>
      <!-- 查询框 -->
      <el-form-item>
        <el-button type="primary" icon="el-icon-refresh" @click="onRest"></el-button>
        <el-button type="primary" icon="el-icon-search" @click="onSubmit">查询</el-button>
      </el-form-item>
      </el-form-item>
    </el-form>
      <!-- table表单 -->
      <el-table  ref="singleTable" :data="tableData" v-loading="loading"   style="width: 100%">
        <el-table-column label="序号" type="index" align="center" width="50" fixed>  </el-table-column>
        <el-table-column prop="auditstatus" align="center" label="审核状态" width="120">
          <template slot-scope="scope">
            <span v-if="scope.row.auditstatus == 0" style="color:#ffa659;">审核中</span>
            <span v-else-if="scope.row.auditstatus == 1" style="color:#4acf1e;">通过</span>
            <span v-else-if="scope.row.auditstatus == 2" style="color:#dc0101;">驳回</span>
          </template>
        </el-table-column>
        <el-table-column prop="effectivestatus" align="center" label="生效状态"  width="120">
           <template slot-scope="scope">
            <span v-if="scope.row.effectivestatus == 0" style="color:#ffa659;">未生效</span>
            <span v-else-if="scope.row.effectivestatus == 1" style="color:#4acf1e;">已生效</span>
          </template>
        </el-table-column>
        <el-table-column prop="categoryname" align="center" label="晋升类型" ></el-table-column>
        <el-table-column prop="account" align="center" label="商户账号" width="120"></el-table-column>
        <el-table-column prop="brandname" align="center" label="商户隶属品牌" width="140"> </el-table-column>
        <el-table-column prop="company"  align="center" label="商户任职公司" width="120"></el-table-column>
        <el-table-column  prop="identity" align="center" label="商户身份" ></el-table-column>

        <el-table-column prop="createtime" align="center" label="申请生成时间" width="180">
         <template slot-scope="scope">
          <i class="el-icon-time" v-if="scope.row.createtime!=null"></i>
          <span v-if="scope.row.createtime!=null">{{ scope.row.createtime | formatDateStr('yyyy-MM-dd hh:mm:ss') }}</span>
          <span v-else>无</span>   
         </template>
        </el-table-column>

        <el-table-column  prop="audittime" align="center" label="申请审核时间" width="180">
         <template slot-scope="scope">
          <i class="el-icon-time" v-if="scope.row.audittime!=null"></i>
          <span v-if="scope.row.audittime!=null">{{ scope.row.audittime | formatDateStr('yyyy-MM-dd hh:mm:ss') }}</span>
          <span v-else>无</span>   
         </template>
        </el-table-column>

        <el-table-column  prop="effectivetime" align="center" label="申请生效时间" width="180" >
         <template slot-scope="scope">
          <i class="el-icon-time" v-if="scope.row.effectivetime!=null"></i>
          <span v-if="scope.row.effectivetime!=null">{{ scope.row.effectivetime | formatDateStr('yyyy-MM-dd hh:mm:ss') }}</span>
          <span v-else>无</span>   
         </template>
        </el-table-column>
    
        <el-table-column align="center" label="操作" fixed="right" width="160">
        <template slot-scope="scope">
          <el-button type="success" size="mini"  @click="handlePass(scope.row)"  :disabled="scope.row.auditstatus !=0">通过</el-button>
            <!-- <el-button type="danger" size="mini"  @click="dialogTableVisible=true,rejectionApplication(scope.row)" :disabled="scope.row.auditstatus !=0">驳回</el-button> -->
            <el-button type="primary" size="mini"  @click=" dialogFormVisible = true,handleDtail(scope.$index, scope.row)" >查看</el-button>
        </template>
        </el-table-column>
        </el-table>

        <!-- 驳回的dialog -->
        <el-dialog title="请填写驳回原因"
                  :visible.sync="dialogTableVisible"
                  :close-on-click-modal="false">
          <el-form>
          <el-form-item label="驳回原因：">
              <el-input type="textarea" style="width:600px;"
                      v-model="reasons"></el-input>
          </el-form-item>
          </el-form>
          <div slot="footer"
              class="dialog-footer">
          <el-button @click="dialogTableVisible = false">取 消</el-button>
          <el-button type="primary"
                      @click="reject">确 定</el-button>
          </div>
      </el-dialog>
        <!-- dialog详情页 -->
        <el-dialog title="查看详情" :visible.sync="dialogFormVisible" width="50%" top="5vh"   :close-on-click-modal="false">
          <template slot="title">
                <div class="avue-crud__dialog__header">
                    <span class="el-dialog__title">
                        <span style="display:inline-block;background-color: #3478f5;width:3px;height:20px;margin-right:5px; float: left;margin-top:2px"></span>
                       查看详情
                    </span>
                </div>
        </template>
        <el-card>
          <el-form :model="tableList">
            <el-form-item label-width="200px" label="申请类型：" style="width:100%;display: inline-block;" >
                <span>{{tableList.categoryname}}</span>
            </el-form-item>
            <el-form-item label-width="200px" label="申请状态：" style="width:100%;display: inline-block;" >
                <span  >{{tableList.auditstatus == 0 ? "审核中":(tableList.auditstatus == 1 ? "通过":"驳回")}}</span>
            </el-form-item>
            <el-form-item label-width="200px" label="申请状态：" style="width:100%;display: inline-block;" >
                <span  >{{tableList.effectivestatus == 0 ? "未生效":"已生效"}}</span>
            </el-form-item>
             <!-- <el-form-item label-width="200px" label="申请人信息：" style="width:100%;display: inline-block;">
                <span v-if="tableList.audittime != null ">{{tableList.audittime | formatDateStr('yyyy-MM-dd hh:mm:ss')}}</span>
                <span v-else>无</span>
            </el-form-item>
             <el-form-item label-width="200px" label="申请详情：" style="width:100%;display: inline-block;">
                <span v-if="tableList.createtime != null ">{{tableList.createtime | formatDateStr('yyyy-MM-dd hh:mm:ss') }}</span>
                <span v-else>无</span>
            </el-form-item> -->
          
          </el-form>
          </el-card>
          <div slot="footer" class="dialog-footer">
              <el-button @click="dialogFormVisible = false">取消</el-button>
              <el-button type="primary" @click="dialogFormVisible = false">确定</el-button>
          </div>
      </el-dialog>
        <el-pagination class="pagination-container"  background  :page-size="query.pageSize"
        @size-change="handleSizeChange" @current-change="handleCurrentChange"  layout="total,sizes,prev, pager, next, jumper"
        :current-page="this.query.currentPage"
        :page-sizes="[5,10, 20, 30, 50]"
        :total="totalNumber"></el-pagination>
        </el-card>
        </div>
    
</template>
<script>
  import { selectProduction} from "../../api/selectProduction/index.js";
  import {getMbUserAapplyMgrAudit,addmbUserApplyAudit } from "../../api/selectProduction/index.js";
  export default {
    data() {
      return {
        tableData: [],//列表集合
        tableList:{},//详情框信息
        query: {
          currentPage: 1,
          pageSize: 5  ,
          promotioncategoryid:'',
          auditstatus:"" ,//审核状态:0.审核中  1.通过  2.驳回
          effectivestatus:"", // 生效状态：0.未生效  1.已生效
          account:""
        },
        dataList :[],
        totalNumber: 0,
        loading: false,
        dataList:[],
        disabled:false,
        dialogTableVisible: false,
        dialogFormVisible: false,
        rejectData:[],
        reasons:"",
        formLabelWidth: '120px'
      }
    },
    methods: {
      // 下拉框获取数据
      selectProduction(){
          selectProduction()
          .then(data=>{
            // console.log(data)
            this.dataList = data.data 
          })
          .catch(err=>{
            this.$message.error(err)
          })
      },
      // 列表数据获取
      getMbUserAapplyMgrAudit(){
         this.loading = true;
        getMbUserAapplyMgrAudit(this.query)
        .then(data=>{
            console.log(data) 
            if (data.code != 0) {
                this.$message.error(response.message);
                this.loading = false;
                return false;
            }
            this.tableData=data.data.list || []
            this.totalNumber = data.data.totalNumber || 0;
            // console.log(this.tableData)
            setTimeout(() => {
             this.loading = false;
            }, 0.3 * 1000);
          })
          .catch(err=>{
             this.loading = false;
              this.tableData =[]
          })
      },
      //详情
      handleDtail(i,val){
        console.log(i)
        console.log(val)
        //列表详情赋值
        this.tableList = val || {}
      },
      //刷新
      onRest() {
            // this.$router.push({
            //     path: ""
            // });
            this.query = {
                currentPage: 1,
                pageSize: 10  ,
                promotioncategoryid:'',
                auditstatus:"" ,//审核状态:0.审核中  1.通过  2.驳回
                effectivestatus:"", // 生效状态：0.未生效  1.已生效
                account:""
            };
            
           this.getMbUserAapplyMgrAudit()
        },
      //查询
      onSubmit() {
        this.query.currentPage = 1;
        this.getMbUserAapplyMgrAudit()
        // console.log('submit!');
      },
    //驳回信息
      // rejectionApplication(val) {
      //     console.log(val)
      //     this.rejectData =val
      // },
     //通过
      handlePass(val){
       console.log(val)
        const formData = new FormData();
        formData.append("relationtempid ", val.relationtempid);
        formData.append("auditstatus", 1);
       addmbUserApplyAudit(formData)
                    .then(response => {
                      console.log(response)
                        if (response.code != 0) {
                            this.$message.error(response.message);
                            return false;
                        }
                        this.$message.success("通过审核！");
                        this.disabled=true
                        this.onRest();
                        setTimeout(() => {
                            this.loading = false;
                        }, 0.3 * 1000);
                    })
                    .catch(() => {
                        this.loading = false;
                    });
     },
     //直接驳回
      reject(){
        if (this.reasons !=""){
          this.dialogTableVisible=false;
        }else{
          this.$message.error("请填写驳回信息");
        }
        const formData = new FormData();
        formData.append("relationtempid ", this.rejectData.relationtempid);
        formData.append("rejectreason ", this.reasons);
        formData.append("auditstatus", 2);
        addmbUserApplyAudit(formData)
                    .then(response => {
                      console.log(response)
                        if (response.code != 0) {
                            this.$message.error(response.message);
                            return false;
                        }
                        this.$message.success("驳回成功！");
                        this.dialogTableVisible =false
                        this.disabled=true
                        this.onRest();
                        setTimeout(() => {
                            this.loading = false;
                        }, 0.3 * 1000);
                    })
                    .catch(() => {
                        this.loading = false;
                    });

      },
      handleCurrentChange(val) {
            this.query.currentPage = val;
            //scrollTo(0, 800);
            this.getMbUserAapplyMgrAudit()
        },
        handleSizeChange(val) {
            this.query.pageSize = val;
            this.getMbUserAapplyMgrAudit()
        },
    },
   
    mounted(){
      this.selectProduction()
     
    },
   created(){
     this.getMbUserAapplyMgrAudit()
   }

  }
</script>
